<template>
<div id="SeeCoupon">
    <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>查看优惠券包</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="easy-content">       
        <el-form>
              <el-form-item label="券名称" :label-width="formLabelWidth">
                <el-input v-model="userInfo.name" disabled></el-input>
              </el-form-item>
              <el-form-item label="优惠券" :label-width="formLabelWidth">
                <el-input v-model="array_length" style="width:302px;" disabled></el-input>
                <el-button type="primary"
                  size="small"
                  @click="Choice">
                  查看
                </el-button>
              </el-form-item>
              <el-form-item style="padding-left: 120px">
                <el-button type="primary"
                    size="small"                 
                    @click="Preservation">
                    返回
                </el-button>
              </el-form-item>             
        </el-form>        
    </div>
    <!-- 查看弹出框 -->
    <el-dialog title="选择电子券" :visible.sync="dialogVisible2" width="600px">      
        <el-table :data="tableData2" style="width: 100%" height="250">            
            <el-table-column
            prop="id"
            label="券ID"
            width="120">
            </el-table-column>
            <el-table-column
            prop="type"
            label="券类型"
            width="120">
            </el-table-column>
            <el-table-column
            prop="name"
            label="券名称"
            show-overflow-tooltip>
            </el-table-column>
            <el-table-column
            prop="person"
            label="创建人"
            show-overflow-tooltip>
            </el-table-column>
        </el-table>       
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="SeeSure">确 定</el-button>
    </div>
    </el-dialog>
</div>   
</template>
<script>
import { PullCouponPackage } from "@/public/js/saleRoom";
export default {
  data() {
    return {
      userInfo: JSON.parse(sessionStorage.getItem("userInfo")),
      pageSize: 10,
      pageNum: 1,
      pageNo: 1,
      total: 0,
      search: "",
      couponIds: "", //选择打钩的集合
      array_length: "",
      typeStr: "全部类型",
      formLabelWidth: "120px",
      dialogVisible2: false,
      SeeData: {},
      tableData: "",
      tableData2: ""
      //   check: true,
    };
  },
  created() {
    //this._GetCoupon();
    this._PullCouponPackage();
  },
  mounted() {},
  methods: {
    //设置默认勾选状态
    // showCcDialog() {
    //   this.$nextTick(() => {
    //     this.tableData2.forEach(i => {
    //       var id = "";
    //       if (i.check == true) {
    //         this.$refs.multipleTable.toggleRowSelection(
    //           this.tableData2.find(d => d.id === i.id),
    //           true
    //         ); // 设置默认选中
    //       }
    //     });
    //   });
    // },
    // 获取券包下拉
    _PullCouponPackage() {
      var data = {
        bagId: this.userInfo.id,
        search: this.search
      };
      var arr = [];
      PullCouponPackage(data).then(res => {
        // this.tableData2 = res.data.discountCouponList;
        this.total = res.data.total;
        res.data.discountCouponList.forEach(item => {
          if (item.check == true) {
            arr.push(item);
            this.array_length = arr.length + "张";
          }
          item.type == 1 ? (item.type = "代金券") : (item.type = "折扣券");
        });
        this.tableData2 = arr;
      });
    },
    Choice() {
      this.dialogVisible2 = true;
    },
    SeeSure() {
      this.dialogVisible2 = false;
    },
    //保存
    Preservation() {
      this.$router.push("/index/CouponPackage");
    },
  }
};
</script>
<style lang="scss">
#SeeCoupon {
  .el-form {
    width: 30%;
  }
  .el-dialog {
    .input {
      width: 200px;
    }
  }
  .el-form-item__content .btn {
    background: #c8c9cc !important;
    border-color: #c8c9cc !important;
    color: #fff;
    margin-left: 142px;
  }
}
</style>
